<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <button id="btn1">成功</button>
    <button id="btn2">失败</button>
    <button id="btn3">警告</button>
    <button id="btn4">默认</button>
</body>
<script>

    const btn1 = document.getElementById("btn1")
    const btn2 = document.getElementById("btn2")
    const btn3 = document.getElementById("btn3")
    const btn4 = document.getElementById("btn4")

    btn1.onclick = function(){
        new Toast({
            type:"success",
            msg: "通关",
            pos:"top",
            closeType:"auto",
            close:()=>{
                console.log("弹出框被关闭了");
            }
        });
    }
    btn2.onclick = function(){
        new Toast({
            type:"error",
            msg: "挂了",
            pos:"center",
            closeType:"click",
            close:()=>{
                console.log("弹出框被关闭了");
            }
        });
    }
    btn3.onclick = function(){
        new Toast({
            type:"warning",
            msg: "注意了前方有坑",
            pos:"bottom",
            closeType:"auto",
            closeTime: 5000,
            close:()=>{
                console.log("弹出框被关闭了");
            }
        });
    }
    btn4.onclick = function(){
        const t1 = new Toast();
        const t2 = new Toast();
        const t3 = new Toast();
        console.log(t1 === t2)
        console.log(t1 === t3)
        console.log(t2 === t3)
    }

    // 封装函数：一个功能
    // 封装对象：多个功能，数据
    // 封装模块：多个对象，数据，方法
    // 封装组件：结构，样式，行为

    function Toast(ops={}){
        // 1. 处理参数设置默认值
        let {msg="默认文字", pos="center", closeType="auto", closeTime=1000, close, type} = ops;

        // 处理颜色
        let color = "#ccc";
        switch(type){
            case "success":
                color = "green";break;
            case "error":
                color = "red";break;
            case "warning":
                color = "orange";break;
        }

        // 处理位置
        switch(pos){
            case "top":
                pos = 0;break;
            case "center":
                pos = 200;break;
            case "bottom":
                pos = 400;break;
        }
        // 使用单例模式
        if(!Toast.ele){
            // 2. 创建元素
            Toast.ele = document.createElement("dialog")
            // 4. 插入页面
            document.body.appendChild(Toast.ele);
        }
        // 3. 设置元素样式和内容
        Toast.ele.style.display = "block";
        Toast.ele.style.borderColor = color;
        Toast.ele.style.color = color;
        Toast.ele.style.top = pos + "px";
        Toast.ele.innerHTML = msg;

        // 5. 关闭方式
        if(closeType === "auto"){
            setTimeout(()=>{
                Toast.ele.style.display = "none";
                close && close();
            }, closeTime)
        }else{
            Toast.ele.onclick = function(){
                Toast.ele.style.display = "none"
                close && close();
            }
        }
        
        return Toast.ele;
    }
    
</script>
</html>